<!-- 项目预算使用 -->
<template>
  <div class="content">
    <el-card class="box-card">
      <div slot="header">
        <span style="color: rgb(14, 175, 14);">项目预算使用</span>
        <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
      </div>
      <el-select v-model="optionsValue" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <div id="costUseChart" style="width: 100%;height:430px"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chart: undefined,
      optionsValue: '选项1',
      options: [
        {
          value: '选项1',
          label: '风光一体化防沙治沙'
        },
        {
          value: '选项2',
          label: '三北六期'
        },
        {
          value: '选项3',
          label: '蚂蚁森林'
        },
        {
          value: '选项4',
          label: '蓝旗机器人造林'
        }
      ]
    }
  },
  props: {
    tabNum: {
      type: String,
      default: '0'
    }
  },
  watch: {
    tabNum() {
      this.$nextTick(() => {
        this.chart.resize();
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      const ctx = document.getElementById('costUseChart')
      this.chart = echarts.init(ctx)

      let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['使用金额', '剩余金额']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisTick:{show:false},
            axisLine:{
                show:true,
                lineStyle:{
                    color:'#2e81da'
                }
            },
            splitLine:{show:false}
        },
        yAxis: {
            type: 'category',
            data: ['设备成本','人工成功','材料成本','差旅','光伏材料','专项工作费'],
            axisTick:{show:false},
            axisLine:{
                lineStyle:{
                    color:'#2e81da'
                }
            }
        },
        series: [
            {
                name: '使用金额',
                type: 'bar',
                data: [18203, 23489, 29034, 104970, 131744, 630230],
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: '#F9AB0F' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#F2E7CF' // 100% 处的颜色
                    }], false)
                  }
                }
            },
            {
                name: '剩余金额',
                type: 'bar',
                data: [19325, 23438, 31000, 121594, 134141, 681807],
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: '#0DF44F' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#B6F2C7' // 100% 处的颜色
                    }], false)
                  }
                }
            }
        ]
    };
      this.chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>